<template>
  <div class="login">
    <van-form @submit="onSubmit">
      <van-field
        v-model="userName"
        name="userName"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <!-- 选择是否记住密码 -->
      <div class="isRemember">
        <van-checkbox v-model="checked">是否记住密码?</van-checkbox>
        <!-- <van-switch v-model="checked" size="24px" />是否记住密码? -->
      </div>
      <!--      登陆按钮-->
      <div class="clickBtn">
        <van-button size="small" square block type="info" native-type="submit" class="btn">登录</van-button>
        <van-button size="small" plain hairline type="info" class="btn" @click="onClick">去注册</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
//import { Toast } from "vant";
import { reqLoginAPI } from "../api/user";
// import { setToken } from "@/utils/auth";
import Vue from "vue";
import { RadioGroup, Radio, Toast } from "vant";
Vue.use(Radio);
Vue.use(RadioGroup);

import { Checkbox, CheckboxGroup } from 'vant';

Vue.use(Checkbox);
Vue.use(CheckboxGroup);

export default {
  data() {
    return {
      userName: "",       //账户
      password: "",       //密码
      checked: true,      //是否记住密码
    };
  },
  computed: {},
  watch: {},

  methods: {

    onClick(){
      this.$router.push("/register");
    },

    //获取cookie
    getCookie(){
      console.log(document.cookie);
      if (document.cookie.indexOf('token') !==-1){
         Toast("您已经登录，跳转到首页")
        this.$router.push('/');
        // Toast("您已经登录，即将跳转到首页")
      }

    },
    //获取储存的账号和密码
    getLocalStorage(){
      let userInfo = localStorage.getItem('user');
      this.userName = userInfo?JSON.parse(userInfo).userName:'';
      this.password = userInfo?JSON.parse(userInfo).password:'';
    },
    async onSubmit(vaules){
      // console.log(vaules) //账号和密码对象
      //点击登陆按钮
      let loginData =  await  reqLoginAPI(vaules);
      
      console.log(loginData);
      if (loginData && loginData.code === 'success'){
        //保存登陆状态 token到cookie中
        document.cookie ='token='+loginData.token;
       
        //登陆成功  保存账号密码到localStorage
        
        if(this.checked){
          localStorage.setItem('user',JSON.stringify(vaules));
        }
          this.$router.push('/');
      }
    },
  },


  //vue创建时挂载
  created() {
    this.getCookie();
    //运行getCookie之后，如果cookie中的token存在，则无需登录,会直接跳转
    //如果不存在，调用函数
    this.getLocalStorage();//方法作用，使用localStorage中保存的账号和密码数组，渲染到input框中
  },
  mounted() {
  },
  components: {}
};
</script>
<style scoped lang="less">
.login {
  .van-form {
    margin-top: 60px;
  }

  .selectbox {
    margin-top: 30px;
    margin-left: 60%;
  }

  .isRemember{
    float: right;
    overflow: hidden;
    margin-bottom: 30px;
    margin-top: 30px;
    margin-right: 20px;
  }

  .clickBtn{
    width: 160px;
    margin: 0 auto;
  }

  .btn{
    width: 160px;
    font-size: 15px;
    margin-top: 30px;
    
  }
}
</style>